<template>
  <div class="login-container">
    <el-form
      ref="form"
      :rules="rules"
      :model="regist"
      label-width="80px"
      status-icon
      label-position="left"
      class="demo-ruleForm login-page"
    >
      <h1 class="title">用户注册</h1>
      <div class="register-close" @click="closeModal">X</div>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="regist.username"></el-input>
      </el-form-item>
      <el-form-item label="用户密码" prop="password">
        <el-input
          type="password"
          v-model="regist.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="repassword">
        <el-input
          type="password"
          v-model="regist.repassword"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="mobile">
        <el-input v-model="regist.mobile"></el-input>
      </el-form-item>

      <el-form-item label="头像" prop="header">
        <OssUpload v-model="regist.header"></OssUpload>
      </el-form-item>

      <div class="code">
        <span>验证码：</span>
        <input
          @blur="inputblur()"
          class="code-input"
          v-model="verificationcode"
        />
        <el-button class="verificationcode"
          ><Verificationcode @getIdentifyCode="getCode"></Verificationcode
        ></el-button>
      </div>
      <el-form-item>
        <el-button type="primary" @click="submit">立即注册</el-button>
        已有账号？
        <el-button type="text" @click="closeModal">立即登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { isPhone } from "../utils/isPhone";
import Verificationcode from "./Verificationcode";
import OssUpload from "./OssUpload";
export default {
  name: "Register",
  data() {
    const validateMobile = (rule, value, callback) => {
      if (!isPhone(value)) {
        callback(new Error("请输入正确的电话"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.regist.repassword !== "") {
          this.$refs.form.validateField("repassword");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.regist.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      regist: {
        username: "",
        password: "",
        repassword: "",
        mobile: "",
        header: "",
        code: "",
      },
      // 输入框验证码
      verificationcode: "",
      // 实际验证码
      realyVerificationcode: "",
      rules: {
        nickName: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 6, max: 15, message: "只能输入6-15个字母、数字、下划线" },
        ],
        password: [{ validator: validatePass, trigger: "blur" }],
        repassword: [{ validator: validatePass2, trigger: "blur" }],
        mobile: [{ validator: validateMobile, trigger: "blur" }],
      },
    };
  },
  components: {
    Verificationcode,
    OssUpload,
  },
  created() {
    // 清空表单中数据
    this.regist.nickName = "";
    this.regist.password = "";
    this.regist.repassword = "";
    this.regist.mobile = "";
    this.verificationcode = "";
  },
  methods: {
    // 注册
    async submit() {
      const { data: res } = await this.$http.post(
        "/dqxmall/userinfo/register",
        this.regist
      );
       console.log(res)
      if (res.msg === "success") {
        this.$message.success("注册成功");
        this.$store.commit("hideRegisterModal");
      } else {
        this.$message.error("注册失败");
      }
    },
    // 关闭注册框
    closeModal() {
      this.$store.commit("hideRegisterModal");
    },

    // 输入验证码
    getCode(e) {
      this.realyVerificationcode = e;
    },
    // 验证码输入框失去焦点
    inputblur() {
      if (this.verificationcode != this.realyVerificationcode) {
        this.$message("验证码输入错误")
      }
    },
  },
};
</script>

<style lang='less' scoped>
.login-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: -90px;
  z-index: 12;
  background-color: rgba(1, 0, 0, 0.5);
  h1 {
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .register-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
  }
}
.login-page {
  position: relative;
  -webkit-border-radius: 10px;
  border-radius: 5px;
  margin: 100px auto;
  width: 450px;
  color: black;
  padding: 35px 35px 15px;
  background: rgb(255, 255, 255);
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  .code {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    span {
      margin-right: 10px;
      width: 80px;
    }
    .code-input {
      margin-right: 20px;
      width: 150px;
      height: 30px;
      padding-left: 10px;
    }
    .verificationcode {
      padding: 0px;
      background-color: #fff;
    }
  }
}
label.el-checkbox.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
}
</style>

